<template>

  <!-- 表单 -->
  <el-form :model="notice" :rules="rules" ref="notice" label-width="120px" style="margin-top:30px">
    <!-- 名字输入框 -->
    <el-form-item label="信息内容" prop="msg" >
      <el-input type="textarea"  placeholder="编辑信息内容" v-model="notice.msg"  maxlength="200" show-word-limit style="width:60%"></el-input>
    </el-form-item>

    <!-- 提交和取消 -->
    <el-form-item style="margin-left: -70px;">
      <el-button type="primary" @click="onSubmit('notice')">修改</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
  import store from '@/vuex/store'
  import config from "@/config/config"
import {getMsgInfoApi, updateMsgInfoApi } from "@/api/noticeApi";
  export default {
    data() {
      return {
        notice:{
          id:"",
          msg:"",
          tel:""
        },
        rules: {
          msg: [{
              required: true,
              message: '请输入通知信息',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 200,
              message: '长度在 1 到 200 个字符',
              trigger: 'blur'
            }
          ],
        },
      }
    },
    methods: {
      onSubmit(form) {
        this.$refs[form].validate((valid) => {
          if (valid) {
            updateMsgInfoApi(this.notice).then(response => {
               this.$message({
                showClose: true,
                message: "修改成功",
                type: "success"
              });
              this.getMsgInfo();
            }).catch(error => {
              console.log(error)
              // this.$message({
              //   showClose: true,
              //   message: error.data.respondMessage,
              //   type: "error"
              // });
            })
          } else {
            return false;
          }
        });
      },

      getMsgInfo(){
        getMsgInfoApi()
        .then((response) => {
          this.notice = response.data.data;
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: "获取列表失败",
            type: "error",
          });
        });
      }

    },
    created: function() {
      this.getMsgInfo();
    }
  }
</script>